<template>
  <!-- 设置抄送人-->
  <a-modal :width="600" v-model:visible="showChooseCopyUser" title="设置抄送人" title-align="start" :mask-closable="false" @cancel="closedDialog" @ok="submitData">
    <div class="dialog-con">
      <a-radio-group v-model="editInfo.copyToType">
        <a-radio value="APPOINT_USER">指定成员</a-radio>
        <a-radio value="APPOINT_ROLE">指定角色</a-radio>
        <a-radio value="APPOINT_MANAGER">指定发起人主管</a-radio>
      </a-radio-group>
      <div class="choose-list" v-show="editInfo.copyToType === 'APPOINT_USER'">
        <a-button type="text" @click="showChooseUsers = true">+添加成员</a-button>
        <div>
          <a-tag color="#165dff" style="margin: 10px 10px 0 0" v-for="(item, i) in editInfo.copyToUsers" :key="item.userId" closable @close="editInfo.copyToUsers.splice(i, 1)">{{ item.userName }}</a-tag>
        </div>
      </div>
      <div class="choose-list" v-show="editInfo.copyToType === 'APPOINT_ROLE'">
        <a-button type="text" @click="showChooseRoles = true">+添加角色</a-button>
        <div>
          <a-tag color="#165dff" style="margin: 10px 10px 0 0" v-for="(item, i) in editInfo.copyToRoles" :key="item.roleId" closable @close="editInfo.copyToRoles.splice(i, 1)">{{ item.roleName }}</a-tag>
        </div>
      </div>
      <div class="choose-list" v-show="editInfo.copyToType === 'APPOINT_MANAGER'">
        <a-checkbox-group v-model="editInfo.copyToDeptTypes">
          <a-checkbox style="margin-bottom: 10px" v-for="(val, key) in deptList" :key="key" :value="key">{{ val }}</a-checkbox>
        </a-checkbox-group>
      </div>
    </div>
  </a-modal>
  <!-- 选择角色 -->
  <ChooseRoles v-if="showChooseRoles" :isShow="showChooseRoles" @closed="showChooseRoles = false" @success="chooseRolesList" />
  <!-- 选择用户 -->
  <ChooseUsers v-if="showChooseUsers" :isShow="showChooseUsers" @closed="showChooseUsers = false" @success="chooseUserList" />
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import ChooseUsers from './chooseUsers.vue'
  import ChooseRoles from './chooseRoles.vue'
  import { DeptType } from '@/views/workFlow/types'

  onMounted(setDefaultData)

  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    copyInfo: {
      type: Object,
      default: () => {},
    },
  })

  const showChooseCopyUser = ref(props.isShow)
  const showChooseRoles = ref(false)
  const showChooseUsers = ref(false)
  const deptList = DeptType
  const editInfo = ref<any>({})

  function setDefaultData() {
    let copyInfo = props.copyInfo || {}
    editInfo.value = {
      copyToType: copyInfo.copyToType || 'APPOINT_USER',
      copyToRoles: copyInfo.copyToRoles || [],
      copyToUsers: copyInfo.copyToUsers || [],
      copyToDeptTypes: copyInfo.copyToDeptTypes || [],
    }
  }
  // 确认
  async function submitData() {
    let copyToDeptTypes: Array<any> = []
    Object.keys(deptList).forEach((key: string) => {
      if (editInfo.value.copyToDeptTypes?.includes(key)) {
        copyToDeptTypes.push(key)
      }
    })
    editInfo.value.copyToDeptTypes = copyToDeptTypes

    emit('success', editInfo.value)
    closedDialog()
    return true
  }
  // 选择角色
  function chooseRolesList(list: Array<any>) {
    list.forEach((item: any) => {
      if (!editInfo.value.copyToRoles.find((el: any) => el.roleId == item.roleId)) {
        editInfo.value.copyToRoles.push(item)
      }
    })
  }
  // 选择成员
  function chooseUserList(list: Array<any>) {
    list.forEach((item: any) => {
      if (!editInfo.value.copyToUsers.find((el: any) => el.userId == item.userId)) {
        editInfo.value.copyToUsers.push(item)
      }
    })
  }

  // 关闭
  function closedDialog() {
    showChooseCopyUser.value = false
    emit('closed')
  }
</script>
<style lang="less" scoped>
  .dialog-con {
    min-height: 200px;
  }
  .choose-list {
    background-color: #f5f5f5;
    padding: 5px 10px 10px;
    margin-top: 10px;
  }
</style>
